<template>
  <div style="padding-top: 80px">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
    >
      <el-form-item :label="labelNameUser" prop="nickname">
        <div v-html="ruleForm.nickname"></div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UserSessionService from '@/service/UserSessionService'
export default {
  name: 'UserInfo',
  data () {
    return {
      labelNameUser: chrome.i18n.getMessage('userContentLabelUser'),
      ruleForm: {
        nickname: ''
      }
    }
  },
  mounted () {
    this.loading()
  },
  methods: {
    loading () {
      UserSessionService.getUserInfo(userInfo => {
        console.log('user info:', userInfo)
        this.ruleForm.nickname = userInfo.nickname
      })
    }
  }
}
</script>

<style scoped>

</style>